import { useState, useEffect } from 'react'
import { Button, Space, Divider, Input, Tooltip, Image, message } from 'antd'
import { ArrowRightOutlined } from '@ant-design/icons'
import Gg, { stateHook } from "./gg";
import Gongsha from "./gongsha";
import s from "./index.module.less";
import Img1 from "@/assets/img2/1.png";
import Img2 from "@/assets/img2/2.png";
import Img3 from "@/assets/img2/3.png";
import { versionPathOperation } from "@/utils/index";

function App(): JSX.Element {

  const [config, setConfig] = useState<any>({
    ...stateHook(),
    qm: '',
    qf: '',
    mapVal: '',
    StartPoint: '',
    npcText: '',
    baolv: '',
    EffectImageList: `;--------手动添加至最后面 NewopUI.Pak 有的话不需要重复加！\nNewopUI.Pak\nqkbd.Pak`,
    PlugList: `91cq.dll\nESP-X32.DLL`,
  })

  const [cz, setCZ] = useState(versionPathOperation.get('chongzhigeshi') || '名称-比例-货币;钻石-10-CREDITPOINT;充值积分-1-GAMEGLORY')
  const [cz2, setCZ2] = useState('')

  const getVal = async () => {
    if (!config.path2) {
      return message.error('请输入会员站配置文件的路径')
    }

    const c = {
      ...config
    }
    c.qm = await window.api.getVal(config.path2, 'newConfig', '版本脚本安装', 'Envir', 'MapQuest_def', 'QManage.txt')
    c.qf = await window.api.getVal(config.path2, 'newConfig', '版本脚本安装', 'Envir', 'Market_Def', 'QFunction-0.txt')
    c.mapVal = await window.api.getVal(config.path2, 'newConfig', '版本脚本安装', 'Envir', 'Mapinfo.txt')
    c.StartPoint = await window.api.getVal(config.path2, 'newConfig', '版本脚本安装', 'Envir', 'StartPoint.txt')
    c.npcText = await window.api.getVal(config.path2, 'newConfig', '版本脚本安装', 'Envir', 'MerChant.txt')
    c.baolv = await window.api.getVal(config.path2, 'newConfig', '添加超级称号爆率.txt')
    setConfig(c)

    return c
  }

  useEffect(() => {
    getVal()
  }, [])

  return (
    <>
      <div className={s.box}>
        <Divider>新手接待|充值</Divider>
        <Gg config={config} setConfig={setConfig} />

        <div>
          <p>
            复制到qm的内容:

            <Button size='small' type='primary' onClick={async () => {
              window.api.openFile(config, 'MapQuest_def', 'QManage.txt')
            }}>打开QM.txt手动加</Button>
          </p>
          <div className='flex'>
            <Input.TextArea
              spellCheck="false"
              autoSize={{ maxRows: 30 }}
              value={config.qm}
              onChange={(e) => {
                const c = {
                  ...config
                }
                c.qm = e.target.value
                setConfig(c)
              }}
            />
          </div>
        </div>

        <div>
          <div>
            复制到qf的内容:

              <Button size='small' type='primary' onClick={async () => {
                window.api.openFile(config, 'Market_Def', 'QFunction-0.txt')
              }}>打开QF.txt手动加</Button>
          </div>
          <div className='flex'>
            <Input.TextArea
              spellCheck="false"
              autoSize={{ maxRows: 30 }}
              value={config.qf}
              onChange={(e) => {
                const c = {
                  ...config
                }
                c.qf = e.target.value
                setConfig(c)
              }}
            />
          </div>
        </div>

        <div>
          <p>
            复制到EffectImageList的内容:
            <Button size='small' type='primary' onClick={async () => {
              // window.api.copePath(config.EffectImageList)
              window.api.openFile(config, 'EffectImageList.txt')
            }}>复制内容并打开EffectImageList.txt</Button>
          </p>
          <div className='flex'>
            <Input.TextArea
              spellCheck="false"
              autoSize
              value={config.EffectImageList}
              onChange={(e) => {
                const c = {
                  ...config
                }
                c.EffectImageList = e.target.value
                setConfig(c)
              }}
            />
          </div>
        </div>

        <div>
          <p>
            复制到mapInfo(<span style={{ color: 'red' }}>里面的‘Q004’是默认新手地图，根据需要自己手动修改</span>):
            <br />
            <Button size='small' type='primary' onClick={async () => {
              window.api.openMapInfo(config)
            }}>点击自动复制内容并打开MapInfo文件</Button>
          </p>
          <div className='flex'>
            <Input.TextArea
              spellCheck="false"
              autoSize
              value={config.mapVal}
              onChange={(e) => {
                const c = {
                  ...config
                }
                c.mapVal = e.target.value
                setConfig(c)
              }}
            />
          </div>
          <br />
          <div>
            <Button size='small' type='primary' onClick={async () => {
              window.api.copePath(config.StartPoint)
              window.api.openFile(config, 'StartPoint.txt')
            }}>点击自动复制内容并打开StartPoint文件</Button>
            <br />
            <Input.TextArea
              spellCheck="false"
              autoSize
              value={config.StartPoint}
              onChange={(e) => {
                const c = {
                  ...config
                }
                c.StartPoint = e.target.value
                setConfig(c)
              }}
            />
          </div>
        </div>

        <div>
          <p>
            复制到Merchant.txt:
            <br />
            <Button size='small' type='primary' onClick={async () => {
              await window.api.huiyuan2(config)
            }}>点击自动复制内容并打开Merchant.txt</Button>
          </p>
          <div className='flex'>
            <Input.TextArea
              spellCheck="false"
              autoSize
              value={config.npcText}
              onChange={(e) => {
                const c = {
                  ...config
                }
                c.npcText = e.target.value
                setConfig(c)
              }}
            />
          </div>
        </div>

        <div>
          <p>
            添加超级称号爆率(<span style={{ color: 'red' }}>找到版本增加爆率的脚本添加</span>):
          </p>
          <div className='flex'>
            <Input.TextArea
              spellCheck="false"
              autoSize={{
                maxRows: 10
              }}
              value={config.baolv}
              onChange={(e) => {
                const c = {
                  ...config
                }
                c.baolv = e.target.value
                setConfig(c)
              }}
            />
          </div>
        </div>

        <Space>
          <Tooltip title={<Image src={Img1} />}>
            <Button size='small' type='primary' onClick={async () => {
              const isTure = await window.api.huiyuan_new4(config)
              if (isTure) {
                message.success('修改成功')
              } else {
                message.error('请填写完整')
              }
            }}>根目录存放</Button>
          </Tooltip>

          <Tooltip title={
            <div>
              <Image src={Img2} />
              <p>复制dll相关插件到Mir200下,自动复制dll内容并打开PlugList.list</p>
            </div>
          }>
            <Button size='small' type='primary' onClick={async () => {
              const isTure = await window.api.huiyuan_new3(config)
              if (isTure) {
                window.api.copePath(config.PlugList)
                window.api.openFile2(config, 'Mir200', 'PlugList.txt')
              } else {
                message.error('请填写完整')
              }
            }}>复制dll到Mir200下</Button>
          </Tooltip>

          <Button size='small' type='primary' onClick={async () => {
            const isTure = await window.api.huiyuan_new1(config)
            if (isTure) {
              message.success('修改成功')
              window.api.openFile(config, 'Market_Def')
            } else {
              message.error('请填写完整')
            }
          }}>复制37w相关npc文件到Market_Def</Button>

          <Tooltip title={<Image src={Img3} />}>
            <Button size='small' type='primary' onClick={async () => {
              const isTure = await window.api.huiyuan_new2(config)
              if (isTure) {
                message.success('修改成功')
                window.api.openFile(config, 'QuestDiary')
              } else {
                message.error('请填写完整')
              }
            }}>复制通服功能脚本到QuestDiary</Button>
          </Tooltip>
        </Space>
      </div>

      <div>
        <Divider>自动生成充值内容</Divider>

        <Space align="start">
          <div>
            <Input.TextArea
              spellCheck="false"
              autoSize
              style={{ width: 340 }}
              placeholder='格式：名称-比例-货币(如RMB-100-GAMEPOINT)'
              value={cz}
              onChange={(e) => {
                setCZ(e.target.value)
                versionPathOperation.save('chongzhigeshi', e.target.value)
              }}
            />
            <div>
              <Button type='primary' size='small' onClick={() => {
                window.api.openCZ(config)
              }}>打开充值脚本.txt手动替换</Button>
            </div>
          </div>

          <Button type='primary' size='small' onClick={() => {
            let v1 = '#IF\n#ACT\n'
            let v2 = '<游戏币兑换<$str(S$货币1名称)>|250#兑换比例：1个游戏币兑换'
            let v3 = ''
            let v4 = '兑换成功，你获得了'
            cz.split(';').forEach((item, index) => {
              const n17 = versionPathOperation.get('N17') || '*'
              const arr = item.split('-')
              const i = index + 1
              v1 += `MOV S$货币${i}名称 ${arr[0]}\nMOV N$货币${i}比例 ${arr[1]}\n\n`

              v2 += `<$str(N$货币${i}比例)><$str(S$货币${i}名称)>+`

              v3 += `Mul	N$货币比例A${i}	${n17}	<$STR(N$货币${i}比例)>\n${arr[2]} + <$STR(N$货币比例A${i})>\n\n`

              v4 += `<$str(N$货币比例A${i})>个<$STR(S$货币${i}名称)>;`
            })

            const value = `;-------替换1-------
${v1}
;-------替换2
${v2.substring(0, v2.length - 1)}

;-------替换3 ,这里变量对应替换变量中的N17，会自动写入N17替换的值--------------
${v3}
;-------替换4-------
${v4.substring(0, v4.length - 1) }
`

            setCZ2(value)
          }}>生成<ArrowRightOutlined /></Button>

          <Input.TextArea
            spellCheck="false"
            autoSize
            style={{ width: 420 }}
            value={cz2}
            onChange={(e) => {
              setCZ2(e.target.value)
            }}
          />
        </Space>
        
      </div>

      <Gongsha configF={config} />

      <div className={s.api}>
        定时器: setOnTimer   ontimer <br />
        背包按钮: ItemBagButtonClick <br />
        技能触发: MagSelfFunc <br />
        物品双击触发: StdModeFunc <br />
        捡取物品: PickUpItem <br />
        设置爆率: KILLMONBURSTRATE <br />
      </div>
    </>
  )
}

export default App
